<template>
	<view>
        <uni-notice-bar showIcon="true"  scrollable="true" v-if="bartext" :text="bartext"></uni-notice-bar>
		<view class="example-body">
			<uni-steps :options="list" active-color="#007AFF" :active="activeType" direction="column">
			
			</uni-steps>
		</view>
		
		<view class="content-show">
			<view>
				<view class="module CBlue" @click="clickSign">
					<view class="text">点击签到</view>
					<view class="time">{{timeObjet.time}}</view>
				</view>
			</view>
		</view>
		
		<view style="text-align: center;padding: 20upx 0;color:">
		<uni-icons type="location-filled" color="#BFBFBA;" size="18"></uni-icons>
		<text style="color: #BFBFBA;">
		{{address}}
		</text></view>
		
		
		<uni-group title="签到照片(点击预览):" top="0" background-color="#413f3e">
				 	 
		    <view class="an-img" v-for="(item, index) in imgList" :key="index" @click="perviewImg(index)">
		     	<image :src="item" v-if="item"></image>
		    </view>
			<view v-if="imageType" class="an-img-add"> 
				<uni-icons type="image-filled" size="40" color=view >"#FFFFFF"></uni-icons>
			</view>
							
		</uni-group>
			
        <custom-tarbar  class="bar" :selected="0"></custom-tarbar>

	</view>
</template>

<script>
	import customTarbar from '@/components/custom-tarbar.vue';
	import{
		formateDate
	} from "@/common/util.js"
	export default {
		components: {
		    'custom-tarbar': customTarbar
		},
		data() {
			return {
				imgbase: '',
				imageType: true,
				imgList: [],
				imgBase64List: [],
				bartext: '拿的起的是能力，放得下的是智慧',
				list:[ //
					{title:'上班打卡',desc:'2018-11-11'},
				    {title:'下班打卡',desc:'2018-11-13'}
				],
				activeType: 1,
				address: '',
				timeObjet:{
					time: formateDate(new Date(), 'h:min:s')
				}
			}
		},
		onLoad(){
		  	this.switchChange();
		},
		onBackPress(e){
		
		  //返回主页面tabBar
		  uni.switchTab({
		  	url:"/pages/workbench/workbench"
		  })
		    // 此处一定姚要return为true，否则页面不会返回到指定路径
		    return true;
		},
		onShow(){
			var _this = this
			setInterval(function() {
				//this.time = formateDate(new Date(), 'h:min:s')
				_this.$set(_this.timeObjet, 'time', formateDate(new Date(), 'h:min:s'));

			}, 1000)
		},
		methods: {
			perviewImg(index){
					let urls = [];
					if(index != -1){
						urls[0] = this.imgList[index];
					}else{
						urls = this.imgList;
					}
					uni.previewImage({
						urls: urls
					});
			},
			
			clickSign(){
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
				  success: (chooseImageRes) => {
					for (var i = 0; i < chooseImageRes.tempFilePaths.length; i++) {
						this.imgList.splice(0,this.imgList.length);
						this.imgList.push(chooseImageRes.tempFilePaths[i]);
					    if( this.imgList.length >= 1 ){
						    this.imageType = false }
					}
					const user = uni.getStorageSync('userMess');
					const tempFilePaths = chooseImageRes.tempFilePaths[0];
					const img64 = this.$base.base64(tempFilePaths)
					
					
					console.log(this.address)
					console.log(img64)
					console.log(user.Id)
					console.log(user.token)
			        uni.request({
			            url: this.$httpUrl +'/index/Index/userClockIn', //仅为示例，并非真实接口地址。
			            method: 'POST',
			        	header:{
			        		token: user.token
			        	},
			        	data: {
			        		userid: user.Id,
							road: this.address, 
							workpic: img64,    
							workrmark: '签到图片'
			            },
			            success: (res) => { //请求正常
						    console.log('请求成功')
			                console.log(res.data);
			            },
			        	fail: (res) => { //异常
			        		this.$uniApi.open(res.data.msg)
			        	}
			        });
				  }
				})
			},
			onClick(e) { 
				uni.showToast({
					title: `点击${e.content.text}`,
					icon: 'none'
				})
			},
			switchChange(){
				uni.getLocation({
					type: 'gcj02',
				    geocode : true,
				    success: res => {
						console.log(res.address)
						let s = res.address
						this.address = s.province + s.city + s.district + s.street + s.streetNum + s.poiName
				    }
				});
			},
		}
	}
</script>

<style>
	
	.example-body {
		padding: 0;
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
	}
	
	.goods-carts {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		bottom: 0;
	}
	
	/* 页面标签 */
	.status-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		height: 92rpx;
		margin: 30rpx;
		background-color: #007AFF;
	}
	
	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 15px;
		flex-direction: row;
	}


    .content-show {
		width: 100%
	}
	
	.CBlue {
		background-color: #007aff;
		box-shadow: 0 5px 5px #007aff;
	}
	
	.module {
		overflow: hidden;
		margin: 20upx auto;
		width: 220upx;
		height: 220upx;
		border-radius: 50%;
		color: #fff;
		text-align: center;
	}
 
   .module .text {
 	   font-size: 20px;
 	   margin: 50upx auto 10upx;
    }
	
	.bar{
		position: fixed;  
		bottom: 0rpx;
	}
	/* 照片 */
	.an-uploadImg-group{
	  		margin: 5upx 20upx;
	  	}
	  	.an-img{
	  		float: left; 
	  		margin-right: 10upx;
	  	}
	  	.an-img-add{
	  		float: left; 
	  		margin-right: 10upx; 
	  		height: 100upx; 
	  		width: 100upx; 
	  		background-color: #C8C7CC; 
	  		text-align: center; 
	  		line-height: 110upx;
	  	}
	  	.an-img>image{
	  		height: 100upx; 
	  		width: 100upx;
	  	}
	  	.an-icon-close{
	  		position: relative; 
	  		right: -50upx; 
	  		top: -120upx;
	  	}
</style>
